<?

define('MAXNUM', 1000000);

?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=false;" />
<title>LDIR mormane</title>
<link href="style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="const.js"></script>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="array.js"></script>
<script type="text/javascript" src="marker.ldir.js"></script>
<script type="text/javascript" src="marker.ldirbase.js"></script>
<script type="text/javascript" src="marker.gps.js"></script>
<script type="text/javascript" src="maptypes.js"></script>
<script type="text/javascript" src="misc.drag.js"></script>
<script type="text/javascript" src="misc.util.js"></script>

<script type="text/javascript">

var map;
var markers = [];
var infoWindow;
var moveHandlerTimer = null;
var centerMarker;
var selectedMarker;

var options = {
  version: 1,
  map: {
    gps: false,
    type: 0,
    zoom: 7,
    lat: 45.94206190505,
    lng: 24.9912554854
  },
  maxNum: <?=MAXNUM?>
};

var oldw = 0;
var oldh = 0;

var MAP_TYPE_IDS = [ 'mtMapMaker', google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN ];

//############

function resizeHandler() {
  // get height and width
  winH = (navigator.appName.indexOf("Microsoft")!=-1) ? document.body.offsetHeight : window.innerHeight;
  winW = (navigator.appName.indexOf("Microsoft")!=-1) ? document.body.offsetWidth : window.innerWidth;
  var mc = document.getElementById('map_canvas');
  // mc.style.width = (winW - 204) + "px";
  mc.style.width = winW + "px";
  mc.style.height = winH + "px";

  var oldCenter;
  if (oldw != 0 && oldh != 0)
    oldCenter = map.getCenter();

  // map object
  google.maps.event.trigger(map, 'resize');

  oldw = winW;
  oldh = winH;
  if (oldCenter)
    map.setCenter(oldCenter);
  else
    moveHandler();
}

//############

function loadPlaces() {
  for (var i=0; i<places.length; i++) {
    var p = places[i];
    p.latlng = new google.maps.LatLng(p.lat, p.lng);
  }
  updatePlaces();

  map.setCenter(new google.maps.LatLng(options.map.lat, options.map.lng));
}

//############

function updatePlaces() {
  if (!places)
    return;

  var bounds = map.getBounds();

  document.getElementById('msg_div1').innerHTML = '<p>&nbsp;' + places.length + ' mormane&nbsp;</p>';
  document.getElementById('msg_div1').style.marginLeft = -75;

  // filter
  var newPlaces = [];
  var i;
  for (i=0; i<places.length /* && newPlaces.length <= options.maxNum */; i++) {
    var p = places[i];
    if (centerPlace && p.id == centerPlace)
      newPlaces.push(p);
    if (!centerPlace && bounds.contains(p.latlng))
      newPlaces.push(p);
  }

  // too many places
  var msgdiv = document.getElementById('msg_div');
  if (newPlaces.length > options.maxNum) {
    // show info div
    msgdiv.style.visibility = 'visible';
    msgdiv.innerHTML = '<p>&nbsp;Sunt <!-- peste <?=MAXNUM?> -->' + newPlaces.length + ' mormane vizibile pe hart&#259;&nbsp;<br/>Face&#355;i zoom in pe zona dorit&#259;</p>';
    newPlaces.removeAll();
  }
  else if (newPlaces.length == 0) {
    // show info div
    msgdiv.style.visibility = 'visible';
    msgdiv.innerHTML = '<p>&nbsp;Nu exist&#259; mormane &icirc;n aceast&#259; zon&#259;&nbsp;<br/>Face&#355;i zoom out</p>';
  }
  else {
    // hide info div
    msgdiv.style.visibility = 'hidden';
  }

  var selectedMarkerFound = !selectedMarker;

  // clear marked
  markers.forEach(function(m) {
    m.marked = false;
  });

  for (var i=0; i<newPlaces.length; i++) {
    var p = newPlaces[i];

    var foundMarker = null;
    try {
      foundMarker = markers.find2(p.id, function(m) { return m.id; });
    }
    catch(err) {
      if (Const.logging) console.log("ERROR -- updatePlaces -- find marker -- " + err);
      foundMarker = null;
    }

    var marker = null;
    if (foundMarker != null) {
      marker = foundMarker;
      marker.marked = true;
      if (selectedMarker) {
        if (marker.id == selectedMarker.id)
          selectedMarkerFound = true;
      }
    }
    else {
      if (p.ic == 4)
        marker = new LDIRBaseMarker(p);
      else
        marker = new LDIRMarker(p);
      if (marker.valid) {
        marker.marked = true;
        marker.listener = google.maps.event.addListener(marker, 'click', function(ev) {
          this.markerClicked(ev);
        });
        markers.push(marker);
        marker.setMap(map);

        if (centerPlace) {
          if (p.id == centerPlace)
            centerMarker = marker;
        }
      }
    }
  }

  // sweep
  markers.lastForEach(function(m) {
    try {
      if (!m.marked) {
        markers.remove(m);
        if (m.listener)
          google.maps.event.removeListener(m.listener);
        m.setMap(null);
      }
    }
    catch(err) {
      if (Const.logging) console.log("ERROR -- updatePlaces -- markers.lastForEach -- " + err);
    }
  });

  // gc
  newPlaces.removeAll();

  if (!selectedMarkerFound) {
    infoWindow.close();
    selectedMarker = null;
  }

  if (centerPlace) {
    if (centerMarker) {
      map.setCenter(centerMarker.getPosition());
      map.setZoom(13);
      google.maps.event.trigger(centerMarker, 'click');
    }
    centerPlace = false;
  }
}

//############

function loadJS() {
  // load places
  var plscr = document.getElementById("plscr");
  if (plscr) document.body.removeChild(plscr);
  plscr = document.createElement("SCRIPT");
  if (plscr) document.body.appendChild(plscr);
  plscr.src = 'places.js.php<?
    if (isset($_GET["id"]))
      echo "?id=".intval($_GET["id"]);
  ?>';
  plscr.id = 'plscr';
}

//############

// called when the map is moved or zoomed
function moveHandler() {
  if (moveHandlerTimer != null) {
    clearTimeout(moveHandlerTimer);
    moveHandlerTimer = null;
  }

  // wait for a couple of seconds, then update the markers
  moveHandlerTimer = setTimeout("updatePlaces()", 1500);
}

//############

function initialize() {
  DragFix.enableWorkaround();

  // map initialization

  map = new google.maps.Map(
    document.getElementById("map_canvas"),
    {
      zoom: options.map.zoom,
      center: new google.maps.LatLng(options.map.lat, options.map.lng),
      mapTypeId: MAP_TYPE_IDS[options.map.type],
      navigationControl: false,
      mapTypeControl: true,
      mapTypeControlOptions: {
        mapTypeIds: MAP_TYPE_IDS,
        style: google.maps.MapTypeControlStyle.DEFAULT
      },
      scaleControl: true,
      scaleControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_LEFT
      }
    }
  );

  map.mapTypes.set('mtMapMaker', mtMapMaker);

  // events
  if (window.attachEvent)
    window.attachEvent("onresize", resizeHandler);
  else
    window.addEventListener("resize", resizeHandler, false);

  google.maps.event.addListener(map, "center_changed", moveHandler);
  google.maps.event.addListener(map, "zoom_changed", moveHandler);
  // google.maps.event.addListener(map, "idle", moveHandler);

  map.setMapTypeId('mtMapMaker');

  infoWindow = new google.maps.InfoWindow({ content: '' });
  google.maps.event.addListener(infoWindow, "closeclick", function() {
    selectedMarker = null;
    this.close();
  });

  setTimeout('loadJS()', 100);

  // resize handler calls move handler, that calls updatePlaces
  resizeHandler();
}

//############

function zoomIn() {
  map.setZoom(map.getZoom()+1);
}

//############

function zoomOut() {
  map.setZoom(map.getZoom()-1);
}

</script>
</head>

<body onload="initialize()">
<div id="wrap_main">
  <div id="map_canvas"></div>
  <div id="msg_div1"></div>
  <div id="msg_div2">
    <p class="title">Legend&#259; mormane</p>
    <p>&nbsp;<img src="icons/i1.png" class="small" /> &nbsp;raportate&nbsp;</p>
    <p>&nbsp;<img src="icons/i2.png" class="small" /> &nbsp;excluse&nbsp;</p>
    <p>&nbsp;<img src="icons/i3.png" class="small" /> &nbsp;alocate&nbsp;</p>
    <p>&nbsp;<img src="icons/i7.png" class="small" /> &nbsp;cur&#259;&#355;ate&nbsp;</p>
    <p>&nbsp;<img src="icons/i5.png" class="large" /> &nbsp;baze de colectare&nbsp;</p>
  </div>
  <div id="msg_div"></div>
  <div id="zoomin_div">
    <a class="dragfix" href="javascript:zoomIn()"><img src="icons/btn-zoomin.png" alt="Zoom In" /></a>
  </div>
  <div id="zoomout_div">
    <a class="dragfix" href="javascript:zoomOut()"><img src="icons/btn-zoomout.png" alt="Zoom Out" /></a>
  </div>
  <div id="cpr_div">
    <p>Powered by GTS Telecom</p>
  </div>
</div>
</body>
</html>
